<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../data/jquery-3.6.0.js"></script>
</head>

<body>
    <script>
        /*
         * promise 是 es6 新增解决异步的方法 可以理解为一个类
         使用的时候需要对 promise 进行实例化 处理 接收一个回调函数为参数
         这个回调函数又接收 两个 参数 resolve, reject 通过 resolve 把进行中的状态变成成功的状态
         通过 reject 把进行中的状态变成成功的状态
         一共有三个状态 成功 fulfilled 失败 rejected 进行中 pending
         链式的写法 可以通过.then 的写法
         promise有哪些API方法：.then(),.catch(),.finally()，.all(),.race()
         应用场景：封装ajax,axios的get,post封装，微信小程序中封装wx.request()，uniapp开发中uni.request()
         **/
         
        //let p = new Promise((resolve, reject) => {
        //  resolve('成功') //成功的状态 fulfilled
        // reject('失败')  //失败的状态 rejected
        // })

        // console.log(p);

        // 链式的写法 可以通过.then 的写法
        // p.then(res => {
        //     console.log('成功了');
        // }, (err => {
        //     console.log('失败了');
        // }))

        // p.then(res=>{
        //     console.log('成功');
        // }).catch(err=>{
        //     console.log("失败");
        // }).finally(o=>{
        //     console.log('成功,失败都可以');
        // })


        // 实现一个 promise 封装  解决回调地狱问题
        // 通过函数，里面是原生的ajax请求 通过callback 把正确的结果返回出去
        // 再通过 回调函数接收请求的数据

        // function promise(callback){
        //     // 原生的ajax
        //     $.ajax({
        //         url:'../data/prh1.json',
        //         method:'get',
        //         // data:{}
        //         success:function(res){
        //             // console.log('成功' , res);
        //             callback(res)
        //         },
        //         error:function(err){
        //             console.log('失败',err)
        //         }
        //     })
        // }

        // promise(function(aa){
        //     console.log('成功结果', aa); // 成功结果 {a: 7}
        // })


        // 封装 Ajax 请求
        // let p = new Promise((resolve, reject) => {
        //     $.ajax({
        //         url: '../data/prh1.json',
        //         method: 'get',
        //         success: function (res) {
        //             resolve(res)
        //         },
        //         error: function (err) {
        //             reject(err)
        //         }
        //     })
        // })

        // p.then((res) => {
        //     console.log('11成功',res);
        // }).catch((err) => {
        //     console.log('22失败',res);
        // }).finally(() => {
        //     console.log('失败成功都会执行');
        // })

        // 封装axios 写法
        // axios.get(url,params:{}).then(res => {})  
        // axios.post(url,data:{}).then(res => {})   
        // axios({url: url,params: params}).then(res => {}

        // function axios(url) {
        //     return new Promise((resolve, reject) => {
        //         $.ajax({
        //             url: url,
        //             success: function (res) {
        //                 resolve(res)
        //             },
        //             error: function (err) {
        //                 reject(err)
        //             },
        //         })
        //     })

        // }

        // axios('../data/prh1.json').then(res => {
        //   console.log('成功', res);
        // }).catch((err) => {
        //   console.log( '失败' , err);
        // }).finally(() => {
        //   console.log('不管成功与失败都会执行');
        // })

        //promise其它api方法all,race
        //多个接口都请求到Promise.all[promise1,promise2,...]返回数组。
        //1.all
        //  let p1 = new Promise((resolve, reject) => {
        //    resolve('成功p1')
        //  })
        //  let p2 = new Promise((resolve, reject) => {
        //    resolve('成功p2')
        //  })
        //  Promise.all([p1, p2]).then(res => {
        //    console.log('all方法', res);
        //    let [arr1, arr2] = res
        //    console.log(arr1, arr2);
        //  })

        //2.结合封装的promise
        // let shu1 = axios('../data/prh1.json')    //第1个接口
        // let shu2 = axios('../data/prh1.json')    //第2个接口
        // Promise.all([shu1, shu2]).then(res => {
        //     console.log('all方法', res);
        //     let [arr1, arr2] = res
        //     console.log(arr1, arr2);
        // })

       //3.race方法，谁请求的快先走谁
       // let shu1 = axios('../data/prh1.json')    //第1个接口
       // let shu2 = axios('../data/prh1.json')    //第2个接口
       // Promise.race([shu2, shu1]).then(res => {
       //   console.log('race方法', res);
       // })





    </script>
</body>

</html>